<template>
  <table-form :disabled="disabled" @next="sales1Ctrl" @jump="jump">
    <template slot="title">
      <h2 class="fromDivTit">
        <div>请填写业主需支付费用</div>
        <i
          v-if="isEdit && detailRes.step <= 9"
          class="edit-icon"
          @click="isEnabled = true"
        />
      </h2>
    </template>
    <div class="form-body">
      <el-form
        ref="sales1Form"
        :model="sales1Form"
        label-width="70px"
        class="formDiv"
      >
        <el-row :gutter="24" class="row_div">
          <el-form-item label="费用:" :required="true" label-width="85px">
            <div
              v-for="(item, index) in fromExpenses"
              :key="index"
              class="fromDivArr"
            >
              <el-col :xs="24" :sm="4" :lg="4" class="agg">
                <el-input
                  v-model="item.name"
                  :disabled="isEdit && !isEnabled"
                  class="input_k"
                  type="text"
                  placeholder="请输入费用名称"
                />
              </el-col>
              <el-col :xs="24" :sm="4" :lg="4" class="agg">
                <el-input
                  v-model="item.feeDollar"
                  :disabled="isEdit && !isEnabled"
                  class="input_k"
                  type="text"
                  placeholder="$请输入(澳币)"
                  @input="getCNY(index, item.feeDollar)"
                />
              </el-col>
              <el-col :xs="24" :sm="4" :lg="4" class="agg">
                <el-input
                  v-model="item.feeCny"
                  :disabled="isEdit && !isEnabled"
                  class="input_k"
                  type="text"
                  placeholder="￥请输入(人民币)"
                  @input="getCNY(index, item.feeCny, true)"
                />
              </el-col>
              <el-col v-if="index == 0" :xs="24" :sm="4" class="agg addAgg">
                <span
                  class="class_span"
                  :class="isEdit && !isEnabled ? 'gray' : ''"
                  @click="addDct"
                  >添加费用</span
                >
              </el-col>
              <el-col
                v-if="index > 0"
                :xs="24"
                :sm="4"
                :lg="4"
                class="agg addAgg"
              >
                <span
                  class="class_span"
                  :class="isEdit && !isEnabled ? 'gray' : 'class_span'"
                  @click="delDct(index)"
                  >删除</span
                >
              </el-col>
              <br />
            </div>
          </el-form-item>
        </el-row>
        <div class="tab_div">
          <el-row :gutter="32">
            <el-form-item
              v-model="sales1Form.deductFlag"
              :disabled="isEdit && !isEnabled"
              label="可用租金抵扣:"
              label-width="90px"
            >
              <el-col :xs="24" :sm="8" :lg="8" class="agg">
                <el-checkbox
                  v-model="checked"
                  :disabled="isEdit && !isEnabled"
                  @change="change"
                  >是</el-checkbox
                >
              </el-col>
            </el-form-item>
          </el-row>
          <el-row :gutter="32">
            <el-form-item label="备注:" label-width="85px">
              <el-col :xs="24" :sm="24" :lg="24" class="agg">
                <el-input
                  v-model="sales1Form.remarkStep1"
                  :disabled="isEdit && !isEnabled"
                  class="input_b"
                  type="textarea"
                  :rows="5"
                  placeholder="请输入"
                />
              </el-col>
            </el-form-item>
          </el-row>
        </div>
      </el-form>
      <div v-if="jumpReason" class="jump-box">
        <div class="jump-reson">跳过原因:</div>
        <span>{{ jumpReason }}</span>
      </div>
    </div>
    <template v-if="isEdit" slot="footer">
      <div class="dialog-footer">
        <el-button
          v-if="isEnabled"
          :disabled="disabled"
          type="primary"
          @click="saveEdit"
          >保存</el-button
        >
      </div>
    </template>
  </table-form>
</template>
<script>
import TableForm from "../../../lease/components/tableForm";
import { saleStep1, edit } from "@/api/sale";
import { getAustraliaRate } from "@/api/dataConfig";

export default {
  components: {
    TableForm,
  },
  props: {
    id: {
      type: String,
      default: "",
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isEnabled: false,
      disabled: false,
      checked: "",
      sales1Form: {
        deductFlag: 0,
        remarkStep1: "",
        id: "",
        paymentList: [],
      },
      value: "",
      fromExpenses: [{ name: "", feeDollar: "", feeCny: "" }],
      textarea: "",
      detailRes: {
        jumpList: [],
      },
      australiaRate: 0,
    };
  },
  computed: {
    jumpReason() {
      if (!this.detailRes.jumpList) return "";
      const hasReason = this.detailRes.jumpList.find((item) => {
        return item.jumpStep === 1;
      });
      return hasReason ? hasReason.jumpNote : "";
    },
  },
  watch: {
    sales1Form: {
      handler(newVal, oldVal) {
        this.fromExpenses.forEach((item, index) => {
          if (item.name && item.feeDollar && item.feeCny) {
            this.disabled = false;
          } else {
            this.disabled = true;
          }
        });
        this.sales1Form.paymentList = this.fromExpenses;
      },
      deep: true,
    },
  },
  created() {
    this.sales1Form.id = this.id;
    this.getAustraliaRate();
  },
  async mounted() {
    if (!this.isEdit) {
      this.sales1Form = {
        deductFlag: "",
        remarkStep1: "",
        id: "",
        paymentList: [],
        stepName: "待确认费用",
      };
    } else {
      await this.$store.dispatch("detail/getSaleDatail", this.id);
      var detail = this.$store.state.detail.saleDetail;
      this.detailRes = detail;
      this.sales1Form = Object.assign(
        {},
        {
          deductFlag: detail.deductFlag,
          remarkStep1: detail.remarkStep1,
          id: this.id,
          paymentList: detail.paymentList,
          stepName: "待确认费用",
        }
      );
      this.fromExpenses = this.sales1Form.paymentList;
    }
    if (this.fromExpenses.length === 0) {
      this.fromExpenses = [{ name: "", feeDollar: "", feeCny: "" }];
    }
    if (detail.deductFlag === 1) {
      this.checked = true;
    } else {
      this.checked = false;
    }
  },
  methods: {
    async saveEdit() {
      this.sales1Form.paymentList = this.fromExpenses;
      var res = await edit(this.sales1Form);
      if (res.code === 200) {
        this.$message({ message: "操作成功", type: "success" });
        this.isEnabled = false;
      }
    },
    async sales1Ctrl() {
      this.sales1Form.id = this.id;
      this.sales1Form.paymentList = this.fromExpenses;
      var sale1Res = await saleStep1(this.sales1Form);
      if (sale1Res.code === 200) {
        this.$emit("next");
      }
    },
    async getAustraliaRate() {
      const res = await getAustraliaRate();
      if (res.code === 200) {
        this.australiaRate = res.data.rate || 0;
      }
    },
    ceil(num, byte) {
      const n = Math.pow(10, byte);
      return Math.ceil(num * n) / n;
    },
    getCNY(i, val, isCny) {
      console.log(val);
      if (!this.australiaRate) {
        return;
      }

      if (!val) {
        this.fromExpenses[i].feeDollar = "";
        this.fromExpenses[i].feeCny = "";
        return;
      }

      if (isCny) {
        this.fromExpenses[i].feeDollar = this.ceil(
          val / this.australiaRate,
          2
        ).toString();
      } else {
        this.fromExpenses[i].feeCny = this.ceil(
          val * this.australiaRate,
          2
        ).toString();
      }
    },
    change() {
      if (this.checked === true) {
        this.sales1Form.deductFlag = 1;
      } else {
        this.sales1Form.deductFlag = 0;
      }
    },
    jump() {
      let list = [...this.sales1Form.paymentList];
      list.forEach((item, index) => {
        const { name, feeDollar, feeCny } = item;
        if (!name && !feeDollar && !feeCny) {
          list.splice(index, 1);
        }
      });
      this.sales1Form.paymentList = list;
      this.$emit("jump", this.sales1Form);
    },
    addDct() {
      if (this.isEdit && !this.isEnabled) {
        return;
      } else {
        this.fromExpenses.push({
          name: "",
          feeDollar: "",
          feeCny: "",
        });
      }
    },
    delDct(par) {
      if (this.isEdit && !this.isEnabled) {
        return;
      } else {
        this.fromExpenses.splice(par, 1);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.el-textarea__inner {
  height: 113px;
}
.fromDivArr {
  // line-height: 20px;
  display: flex;
  margin-bottom: 10px;
  align-content: center;
}
.el-col-lg-4 {
  width: 150px;
  line-height: 20px;
}
.input_k {
  width: 136px;
}
.class_span {
  color: #5ac6b7;
  cursor: pointer;
  overflow: visible;
  display: block;
}
.input_b {
  width: 493px;
}
.gray {
  color: gray !important;
  cursor: not-allowed !important;
}
.form-body {
  display: flex;
  .jump-box {
    width: 270px;
    margin-left: 20px;
    word-break: break-all;
    .jump-reson {
      color: #5ac6b7;
      font-size: 16px;
      margin-bottom: 10px;
    }
  }
}
</style>
